<template>
  <div>
    <van-nav-bar :title="title" left-arrow @click-left="GOback" fixed placeholder :border="false" />
    <van-dropdown-menu active-color="#1989fa">
      <!-- 全部分类 -->
      <van-dropdown-item title="全部分类" ref="checkbox">
        <template #default>
          <!-- 分类选择 -->
          <van-tree-select :items="items" :active-id.sync="activeId" :main-active-index.sync="activeIndex" height="90vw" @click-nav="LeftNav(activeIndex)" @click-item="RightItem(activeId)" />
        </template>
      </van-dropdown-item>
      <!-- 排序 -->
      <van-dropdown-item v-model="value2" :options="option2" title="排序" @change="checkText(value2)" />
      <!-- 筛选 -->
      <van-dropdown-item title="筛选" ref="sumID">
        <template #default>

          <div class="screening">
            <!-- 配送方式 -->
            <div class="distribution">
              <span>配送方式</span>
              <div class="Courier" ref="chColor" @click="changeColor(DistriButionData[0].id)">
                <svg class="icon" aria-hidden="true" v-if="check">
                  <use xlink:href="#icon-niao"></use>
                </svg>
                <van-icon name="success" color="#3190e8" size="20" v-if="!check" />
                <span v-if="DistriButionData[0]">{{DistriButionData[0].text}}</span>
                <!-- <span>蜂鸟专送</span> -->
              </div>
            </div>
            <header>商家属性 (可以多选)</header>
            <ul class="shuxingcolor">
              <li v-for="(item,index) in attributeData" :key="index" @click="MerchantsID(item.id,index)">
                <van-icon name="success" color="#3190e8" size="20" v-if="!currentCheck[index].zt" />
                <span v-if="currentCheck[index].zt" :style="'color:'+'#'+item.icon_color+';'+'border-color:'+'#'+item.icon_color" class="filter_icon">{{item.icon_name}}</span>
                <span :class="currentCheck[index].zt === false ? 'blue' : 'black'">{{item.name}}</span>
              </li>

            </ul>
          </div>
          <footer class="footer1">
            <button class="btn btn-empty" @click="removeID">清空</button>
            <button class="btn btn-industry" @click="submit">确定</button>
          </footer>
        </template>
      </van-dropdown-item>
    </van-dropdown-menu>

    <!-- 商家列表 -->
    <div class="shop_list_container">
      <ShowList></ShowList>
    </div>
    <van-loading color="#1989fa" v-if="this.ShopData.length===0">加载中...</van-loading>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import items from './items'
import ShowList from '@/views/Home/ShowList/ShowList.vue'
export default {
  components: {
    ShowList
  },
  data() {
    return {
      // value: '',
      //排序所选的值
      value2: null,
      // option1,
      //
      //排序的数据
      option2: [
        { text: '智能排序', value: 4, icon: 'sort' },
        { text: '距离最近', value: 5, icon: 'location-o' },
        { text: '销量最高', value: 6, icon: 'fire-o' },
        { text: '评分最高', value: 3, icon: 'star-o' },
        { text: '起送价最低', value: 1, icon: 'gold-coin-o' },
        { text: '配送速度最快', value: 2, icon: 'underway-o' }
      ],
      //获取sessionStorage的标题令牌
      title: window.sessionStorage.getItem('StoreDatatitle'),
      activeId: null,
      //分类选择的数据
      items,
      //分类左侧的索引
      activeIndex: null,
      //分类左侧的ID
      LeftID: null,
      //蜂鸟选中状态
      check: true,
      //蜂鸟专送的ID
      Bution: null,
      //商家属性的选中状态
      currentCheck: [{ zt: true }, { zt: true }, { zt: true }, { zt: true }, { zt: true }, { zt: true }],
      //商家属性选中的ID
      IDshuzu: [{ id: null }, { id: null }, { id: null }, { id: null }, { id: null }, { id: null }],
      //商家属性选中要提交的ID
      indexID: []
    }
  },
  computed: {
    ...mapState(['ShopData', 'DistriButionData', 'attributeData'])
  },
  methods: {
    GOback() {
      this.$router.go(-1)
    },
    //筛选商家列表
    checkText(value) {
      this.$store.dispatch('checkList', value)
    },
    //分类选择器左侧事件
    LeftNav(activeIndex) {
      this.LeftID = items[activeIndex].id
    },
    //商家分类一级ID和二级ID传入checkList2
    RightItem(id) {
      const ClassID = {
        category_id: this.LeftID,
        category_ids: id
      }
      this.$refs.checkbox.toggle()
      this.$store.dispatch('checkList2', ClassID)
    },
    //点击配送方式的事件
    changeColor(id) {
      if (this.check === true) {
        this.$refs.chColor.style.color = '#1989fa'
        this.Bution = id
        this.check = false
      } else {
        this.$refs.chColor.style.color = '#333'
        this.Bution = null
        this.check = true
      }
    },
    //商家属性特权的点击事件
    MerchantsID(id, index) {
      if (this.currentCheck[index].zt === true) {
        this.currentCheck[index].zt = false
        this.IDshuzu[index].id = id
      } else {
        this.currentCheck[index].zt = true
        this.IDshuzu[index].id = null
      }
    },
    //将最终筛选的ID结果提交给vuex
    submit() {
      this.IDshuzu.forEach(item => {
        this.indexID.push(item.id)
      })
      //   数组去null
      //   if (this.IDshuzu[i].id != null) {
      //     this.indexID.push(this.IDshuzu[i].id)
      //   }
      this.$refs.sumID.toggle()
      this.$store.dispatch('supportID', { indexID: this.indexID, Bution: this.Bution })
      this.removeID()
    },
    //清除所选中的状态及ID
    removeID() {
      this.check = true
      this.Bution = null
      for (let i = 0; i < this.currentCheck.length; i++) {
        this.currentCheck[i].zt = true
      }
      for (let i = 0; i < this.IDshuzu.length; i++) {
        this.IDshuzu[i].id = null
      }
      this.$refs.chColor.style.color = '#333'
      this.indexID = []
    }
  },
  mounted() {
    //触发触发vuex请求商铺筛选列表数据1
    // this.$store.dispatch('getShopsList2')
    //触发vuex请求配送方式数据
    this.$store.dispatch('GETdistribution')
    //触发vuex请求商家属性数据
    this.$store.dispatch('GETattribute')
  }
}
</script>

<style lang="less" scoped>
.van-loading {
  display: flex;
  justify-content: center;
  align-items: center;
}
.van-loading__text {
  text-align: center;
}
.shop_list_container {
  border-top: none;
  margin-top: 1.9rem;
}
.van-dropdown-menu {
  position: fixed;
  top: 1.85rem;
  right: 0;
  width: 100%;
  z-index: 13;
}
.screening {
  margin: 0.5rem 0.5rem;
  font-size: 0.53rem;
  .distribution {
    margin-bottom: 0.4rem;
    > span {
      display: block;
      margin-bottom: 0.3rem;
    }
  }
  .Courier,
  .shuxingcolor > li {
    display: flex;
    align-items: center;
    border: 0.025rem solid #eee;
    width: 4.4rem;
    height: 1.4rem;
    border-radius: 0.125rem;
    padding: 0 0.25rem;
    margin-bottom: 0.25rem;
    margin-right: 0.25rem;
    // > span:nth-child(1) {
    //   color: #3fbde6;
    // }
    .icon {
      margin-right: 0.125rem;
      color: #1989fa;
    }
    > .filter_icon {
      width: 0.8rem;
      height: 0.8rem;
      font-size: 0.5rem;
      border: 0.025rem solid #e4e4e4;
      border-radius: 0.15rem;
      margin-right: 0.25rem;
      line-height: 0.8rem;
      text-align: center;
    }
    > .van-icon-success {
      margin-right: 0.25rem;
    }
  }
  > header {
    margin-bottom: 0.3rem;
  }
  > .shuxingcolor {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
  }
}
.footer1 {
  background-color: #f1f1f1;
  width: 100%;
  padding: 0.5rem 0.5rem;
  display: flex;
  .btn {
    width: 50%;
    height: 1.8rem;
    font-size: 0.8rem;
    line-height: 1.8rem;
    border-radius: 0.2rem;
  }
  .btn-empty {
    background-color: #fff;
    margin-right: 0.5rem;
    border: 0.025rem solid #fff;
  }
  .btn-industry {
    background-color: #56d176;
    color: #fff;
    border: 0.025rem solid #56d176;
  }
}

.blue {
  color: #1989fa;
}
.black {
  color: #333;
}
</style>